<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="${pageContext.request.contextPath}/css/normalize.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/css/NavigationBar.css" rel="stylesheet" type="text/css">
    <style>
        /* 后添加 */
        .two-ul {
            margin-left: 20px;
            height: 0;
            overflow: hidden;
            transition: 0.5s;
        }

        .two-ul a::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #1b87ec;
            margin-right: 10px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left">
        <p class="title">供应商管理系统</p>
        <ul>
            <li><a target="_parent" href="${pageContext.request.contextPath}/AdminServlet">用户管理</a></li>
            <li><a class="xianshi" href="javascript:void(0);">供应商管理</a> <span class="li"></span></li>
            <ul class="two-ul">
                <li><a target="_parent" style="color:#fff;font-size: 14px; padding: 10px;display: inline-block"
                       href="${pageContext.request.contextPath}/EvaluateServlet">供应商-评价信息</a></li>
                <li><a target="_parent" style="color:#fff;font-size: 14px; padding: 10px;display: inline-block"
                       href="${pageContext.request.contextPath}/SupplierServlet">供应商-申请信息</a></li>
            </ul>
        </ul>
    </div>
</div>

<script>
    let a = document.querySelectorAll('li a');
    let li = document.querySelector('.li')
    let xianshi = document.querySelector('.xianshi')
    let twoUl = document.querySelector('.two-ul')
    let twoA = document.querySelectorAll('.two-ul a')

    let h = 0
    twoA.forEach((item, index) => {
        h = (index + 1) * 50
    })

    window.addEventListener('message', (e) => {
        for (let i = 0; i < a.length; i++) {
            if (a[i].href.substr(a[i].href.lastIndexOf('/')) == e.data) {
                a[i].className = 'active'
            }
        }

        for (let i = 0; i < twoA.length; i++) {
            if (twoA[i].href.substr(twoA[i].href.lastIndexOf('/')) == e.data) {
                twoA[i].className = 'active'
            }
        }
    }, false);

    if (localStorage.getItem('flag') == "true") {
        li.style.transform = 'rotate(135deg)'
        twoUl.style.height = h + 'px'
    }

    if (!localStorage.getItem('flag')) {
        localStorage.setItem('flag', false)
    }

    let flag = Boolean(localStorage.getItem('flag'))

    xianshi.addEventListener('click', () => {
        console.log('aaa')
        flag = !flag
        if (flag) {
            li.style.transform = 'rotate(135deg)'
            twoUl.style.height = h + 'px'
        } else {
            li.style.transform = 'rotate(45deg)'
            twoUl.style.height = 0
        }
        localStorage.setItem('flag', flag)
        console.log(flag);
    })
</script>
</body>
</html>